<template>
	<view class="ware_item"  @click="wareDetail" >
		<view class="ware_image">
			<view class="iconfont icon-huangguan" v-if="isHot"></view>
			<image  :src="item.show ? item.itemBanner[0] : tempImage" class="item_image" @error="imageError()" lazy-load />
		</view>
		<view class="ware_detail">
			<view class="detail_title">
				<text class="iconfont icon-taobao"
					style="font-size: 42rpx;color:#fc8848 ;position: absolute;"></text>
				<text style="margin-left: 46rpx;">{{item.itemTitle}}</text>
			</view>
			<view class="detail_ticket">
				<view class="ticket_box">
					<view class="dotted"></view>
					<text class="tick_cicle left_cicle"></text>
					<text style="width: 34rpx; height: 100%;">券</text>
					<text style="height: 100%;margin-left: 10rpx;">{{item.ticket}}元</text>
					<text class="tick_cicle right_cicle"></text>
				</view>
			</view>
			<view class="detail_price">
				<text class="cerrent_price">
					<text style="font-size: 24rpx;">券后</text>
					<text style="font-size: 34rpx;">{{item.itemVoucherPrice}}</text>
				</text>
				<text class="old_price">{{item.itemPrice}}</text>
			</view>
			<!-- <view class="bottom_right" > -->
				<button class="get_ware" @click.stop  @click="copyCode()">复制淘口令</button>
				<!-- <view>月销{{item.saleMonthV2}}</view> -->
			<!-- </view> -->
			<view class="bottom">
				<view class="bottom_left">
					<view class="detail_local">
						<text class="iconfont icon-dianpu"
							style="font-size: 24rpx;margin-right: 4rpx;"></text>
						<text>
							{{item.sellerName}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
					return {
						
					}
				}
			},
			isHot: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tempImage: '../../static/images/image.png',
				clicButton: false
				
			}
		},
		methods: {
			wareDetail(event) {
				console.log(event)
				this.$emit('wareDetail',this.item)
				// if (this.clicButton) {
					
				// } else {
					
				// }
				
			},
			copyCode() {
				console.log('点击')
				// this.clicButton = true
				this.$emit('copyCode',this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ware_item {
		display: flex;
		height: 260rpx;
		padding: 10rpx;
		position: relative;
	
		// background-color: #F29100;
		.ware_image {
			width: 260rpx;
			height: 100%;
			padding: 10rpx;
			padding-right: 20rpx;
			position: relative;
			.icon-huangguan{
				font-size: 90rpx;
				position: absolute;
				color: #EEC900;
				top: -38rpx;
				left: -20rpx;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	
		.ware_detail {
			width: 65%;
			height: 100%;
			// padding-bottom: 20rpx;
			position: relative;
			border-bottom: 1rpx solid #DBDBDB;
	
			.detail_title {
				// height: 80rpx;
				line-height: 42rpx;
				// background-color: pink;
				letter-spacing: 3rpx;
				font-weight: 700;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				overflow: hidden;
				-webkit-box-orient: vertical;
			}
	
			.detail_ticket {
				display: inline-block;
				// width: 120rpx;
				height: 40rpx;
				background-color: #FF6347;
				color: #FFFFFF;
				margin-top: 10rpx;
	
				line-height: 40rpx;
	
				.ticket_box {
					width: 100%;
					font-size: 20rpx;
					height: 100%;
					position: relative;
					padding-left: 10rpx;
					padding-right: 10rpx;
	
					.dotted {
						position: absolute;
						left: 44rpx;
						top: 50%;
						margin-top: -12.5%;
						width: 2rpx;
						height: 70%;
						background-color: #DBDBDB;
					}
	
					.tick_cicle {
						position: absolute;
						width: 14rpx;
						height: 14rpx;
						top: 50%;
						margin-top: -7rpx;
						border-radius: 50%;
						background-color: #FFFFFF;
					}
	
					.left_cicle {
	
						left: -10rpx;
					}
	
					.right_cicle {
						right: -10rpx;
	
					}
	
					text {
						display: inline-block;
						text-align: center;
	
					}
	
				}
			}
	
			.detail_price {
				margin-top: 10rpx;
				height: 50rpx;
				line-height: 50rpx;
	
				// background-color: pink;
				.cerrent_price {
					color: #EE4000;
					font-weight: 700;
				}
	
				.old_price {
					margin-left: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					text-decoration: line-through;
					color: #949494;
				}
			}
			.get_ware {
				position: absolute;
				bottom: 80rpx;
				right: 0px;
				width: 45%;
				// margin: 0 auto;
				background-color: #fc8848;
				color: #fff;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				z-index: 1000;
			}
			.get_ware:active {
				// background: rgba(0, 0, 0, 0.4);
				background-color: #EEAD0E;
			}
			// .bottom_right {
			// 	width: 50%;
			// 	text-align: center;
			
			// 	padding-right: 10rpx;
			// 	// padding-bottom: 12rpx;
			// 	position: relative;

			// }
			.bottom {
				padding-top: 10rpx;
				padding-bottom: 40rpx;
				margin-top: 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #949494;
				font-size: 24rpx;
	
				// background-color: pink;
				.bottom_left {
					width: 100%;
	
					.detail_local {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
	
					}
				}
				
	

			}
		}
	}
</style>
